import 'package:pacsun/components/appbar.dart';
import 'package:pacsun/constants/constant.dart';
import 'package:pacsun/utils/PreferenceUtils.dart';
import 'package:pacsun/view/create/createGuide.dart';
import 'package:pacsun/view/create/createTasks.dart'
    show CreateTasks, NewSummerArrive;
import 'package:pacsun/view/create/guide_dialog.dart';
import 'package:flutter/material.dart';
import 'package:pacsun/view/create/welcome_page.dart';
import 'package:provider/provider.dart';
import 'package:showcaseview/showcaseview.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../provider/taskListProv.dart';
import './createHeader.dart' show CreateHeader;
import './createInspiration.dart' show CreateInspiration;
import './createTasks.dart' show CreateTasks;
import 'mediaPicker/mediaPickerPage.dart';

class CreateCreatorMain extends StatefulWidget {
  final bool showGuide; // 添加参数来控制是否显示指南

  const CreateCreatorMain({super.key, this.showGuide = false});

  @override
  State<CreateCreatorMain> createState() => _CreateCreatorMainState();
}

class _CreateCreatorMainState extends State<CreateCreatorMain> {
  final GlobalKey _one = GlobalKey();
  final GlobalKey _two = GlobalKey();
  final GlobalKey _three = GlobalKey();
  final ScrollController _scrollController = ScrollController();
  bool _extendBodyBehindAppBar = true;
  int guideIndex = -1;

  @override
  void initState() {
    super.initState();
    // 计算滚动区域
    _scrollController.addListener(() {
      setState(() {
        _extendBodyBehindAppBar = _scrollController.offset <= 30;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        toolbarHeight: 0.h,
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: Stack(
        children: [
          const AppBarBg(),
          SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  CreateHeader(guideKey: _one),
                  Container(
                    width: double.infinity,
                    padding: EdgeInsets.only(top: 10).r,
                    decoration: BoxDecoration(
                      color: Color(0XFF181818),
                    ),
                    child: Column(
                      children: [
                        const CampaignLine(),
                        SizedBox(height: 20.h),
                        Showcase.withWidget(
                          key: _two,
                          height: 118.h,
                          width: 335.w,
                          tooltipPosition: TooltipPosition.top,
                          disableBarrierInteraction: true,
                          container: NewGuideDialog(
                            index: 2,
                            onTop: () => ShowCaseWidget.of(context).next(),
                          ),
                          child: CreateTasks(guideKey: _three),
                        ),
                        NewSummerArrive(),
                        CreateInspiration(),
                        SizedBox(height: 12.h),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          // const PublishButton(),

          /// 引导页
          Container(
            child: (widget.showGuide && (guideIndex == 0))
                ? NewGuideDialog(
                    index: guideIndex,
                    onTop: () async {
                      setState(() {
                        guideIndex++;
                      });
                      ShowCaseWidget.of(context)
                          .startShowCase([_one, _two, _three]);
                    },
                  )
                : (widget.showGuide && (guideIndex == -1))
                    ? WelcomePage(onPressed: () {
                        setState(() {
                          guideIndex++;
                        });
                      })
                    : Container(),
          )
        ],
      ),
    );
  }
}

class PublishButton extends StatelessWidget {
  const PublishButton({super.key});

  @override
  Widget build(BuildContext context) {
    // Positioned widget for the button at the bottom
    return Positioned(
      bottom: 20, // Adjust this value as needed
      left: MediaQuery.of(context).size.width / 2 -
          60, // Centers the button (120/2 = 60)
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          minimumSize: const Size(120, 41),
          backgroundColor: Colors.white, // Adjust color as needed
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25),
          ),
          elevation: 5, // This creates the shadow
          shadowColor: Colors.black.withOpacity(0.35),
        ),
        onPressed: () {
          // 跳转到媒体选择页面，不传递任务相关参数
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => MediaPickerPage(
                taskConfigId: null, // 普通发布，无任务ID
                taskRecordId: null, // 普通发布，无记录ID
              ),
            ),
          );
        },
        child: const Text(
          '+ PUBLISH',
          style: TextStyle(
            fontFamily: 'Poppins',
            fontWeight: FontWeight.w700,
            fontSize: 16,
            height: 1.0, // line-height: 100%
            letterSpacing: 0,
            color: Colors.black, // Adjust text color as needed
          ),
        ),
      ),
    );
  }
}

class CampaignLine extends StatelessWidget {
  const CampaignLine({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 335.w,
      height: 40.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8), // 8px radius
        color: Color.fromRGBO(34, 34, 34, 1), // Assuming white background
      ),
      child: Row(
        children: [
          SizedBox(width: 10.w),
          // 1. CAMPAIGN text
          Text(
            'CAMPAIGN',
            style: TextStyle(
                fontFamily: 'Poppins',
                fontWeight: FontWeight.w600,
                fontSize: 14.sp,
                height: 1.0,
                letterSpacing: 0,
                color: Color.fromRGBO(255, 83, 83, 1)),
          ),

          // 2. Divider line (隔开线)
          Container(
            width: 1.w,
            height: 20.h,
            margin: EdgeInsets.symmetric(horizontal: 12.w),
            color: Color.fromRGBO(255, 255, 255, .3),
          ),
          SizedBox(width: 10.w),
          // 3. Summer's Best Jeans & Pants text
          Text(
            'Summer\'s Best Jeans & Pants',
            style: TextStyle(
              fontFamily: 'Poppins',
              fontWeight: FontWeight.w400,
              fontSize: 12.sp,
              height: 1.0,
              letterSpacing: 0,
              color: Colors.white,
            ),
            overflow: TextOverflow.ellipsis,
          ),
          SizedBox(width: 15.w),
          // 4. Icon
          Image.asset('assets/icons/icon_arrow_forward.png',
              width: 10, height: 10),
        ],
      ),
    );
  }
}
